// 通过vue-router插件实现模板路由配置

import { createWebHashHistory, createRouter } from 'vue-router'
import constantRoute from './routes'

const router = createRouter({
    history: createWebHashHistory(),
    routes: constantRoute,
    // 滚动行为
    scrollBehavior() {
        return {
            left: 0,
            top: 0,
        }
    },
})

export default router

/* 

hash路由
    基于URL中的#(锚点)来改变当前页面状态,
    通过访问 window.location.hash
    监听 window.onhashchange 事件

    优点: 不需要服务器配置支持 , 健壮
    缺点: 有个#号 , 在做分布式微前端项目中 , 路由无法嵌套
*/

/* 

history路由
    利用h5 history api来操作浏览器的历史记录栈
    history.pushstate   history.replacestate  来改变url
    监听 window.onpostate 事件

    优点: 没有#号 , 可做分布式微前段
    缺点: 需要服务器配置支持 , 否则刷新页面会404

*/
